<template>
    <div class="definitions">
        <p v-if="!props.searchWord" class="tip">
            Start by typing a word in search...
        </p>
        <p v-else-if="props.searchWord && !result.length">
            Sorry,the definition of this word was not found.
        </p>
        <div
                v-else
                class="definition"
                v-for="(definition,index) in result"
                :key="index"
        >
<!--     音标读音-->
         <div class="phonetics">
                <span class="phonetic" @click="handleClick(index)">
                    {{definition?.phonetics[0]?.text}}
                </span>
             <i class="iconfont icon-yangshengqi" @click="handleClick(index)">&#xe8b8;</i>
             <audio :src="definition?.phonetics[0]?.audio" ref="audio"></audio>
         </div>
         <!--        意思-->
            <div class="meanings">
                <div
                        class="meaning"
                        v-for="(meaning,index) in definition?.meanings"
                        :key="index"
                >
                    <span class="partOfSpeech">{{meaning?.partOfSpeech}}</span>
                    <span class="word-meaning">
                        {{
                        meaning.definitions
                        .map(definition => definition.definition)
                        .join(" ")
                        }}
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
    import axios from 'axios'
    import {watch,ref} from 'vue'
    /* eslint-disable */
    const props=defineProps({
        searchWord:String,
    });
    const audio = ref();
    watch(()=>props.searchWord,getData)
    const result=ref([]);
    function handleClick(index){
        audio.value[index].currentTime = 0;
        audio.value[index].play();
    }
    async function getData(newValue) {
        const url=`https://api.dictionaryapi.dev/api/v2/entries/en/${newValue}`
        result.value=[];//，每次清空
        try{
            const data = await axios.get(url);
            // console.log('数据',data)
            // console.log('1',data.data[0].meanings[0].definitions[0].definition)
            // console.log('2',data.data[0].meanings[0])
            result.value=data.data;
            
        }catch (err) {
            console.log(err)
        }
    }
</script>

<style scoped lang="scss">
    ::-webkit-scrollbar-thumb{
        background-color: rgba(255,255,255,0.6);
        border-radius: 20px;
    }
    ::-webkit-scrollbar{
        width: 5px;
        background:#282c34;
    }
   

    .meanings{
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding-bottom: 1px solid #c5bcbc;
    }


     .definitions{
        border: 10px solid #696969;
        border-radius: 10px;
        height: 65vh;
        padding: 15px;
        overflow-y: scroll;
        display: flex;
        flex-direction: column;
        gap: 5px;
    
    .tip{
        font-size: 18px;
    }
    .definition{
        margin-bottom: 10px;
    }
     .phonetics{
         margin-bottom: 10px;
         .phonetic{
             cursor: pointer;
             border-radius: 5px;
             margin-right: 10px;
             &:hover{
                 opacity:0.8; 
             }
         }
         .iconfont{
             cursor: pointer;
             &:hover{
                 opacity: 0.8;
             }
         }
     }
     }
    div.meaning{
        .partOfSpeech{
            margin-right: 10px;
            background-color: #3b3e45;
            opacity: .8;
            display: inline-block;
            padding-block: 3px;
            padding-inline: 5px;
            font-size: 14px;
            border-radius: 25px;
            line-height: 25px;
        }
        .word-meaning{
            line-height: 25px;
        }
    }
</style>